Uncaught ReferenceError: process is not defined / Line 0: Parsing error

Question

对于一个简单的 Create React App 项目，当运行宁npm install和npm start时，默认web 浏览器¹ 打开。按 F12 在控制台中显示两条错误消息。

如屏幕截图所示，错误消息为：

Uncaught ReferenceError: process is not defined，以及
Line 0: Parsing error: ImportDeclaration should appear when the mode is ES6 and in the module context.

我应该怎么做才能纠正这些错误？

我在别处看到过这些错误，有时参考版本 Create React App 的问题。请参阅下面的参考列表。我相信其中一些与这里的问题有关。

下面提供了 .eslintrc.json 和 package.json 文件。
但由于它们不足以重现错误，
这是一个 link a zip file containing all the necessary project files。 ²

.eslintrc.json :

{
  "env": {
    "browser": true,
    "es2021": true
  },
  "extends": [
    "eslint:recommended",
    "plugin:react/recommended"
  ],
  "parserOptions": {
    "ecmaFeatures": {
      "jsx": true
    },
    "ecmaVersion": "latest",
    "sourceType": "module"
  },
  "plugins": [
    "react"
  ],
  "rules": {
    "no-unused-vars": [
      "warn",
      {
        "argsIgnorePattern": "^_",
        "varsIgnorePattern": "^_"
      }
    ]
  }
}

package.json :

{
  "name": "Uncaught ReferenceError",
  "dependencies": {
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.4.1",
    "@testing-library/user-event": "^7.2.1",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-scripts": "4.0.3"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version"
    ]
  },
  "devDependencies": {
    "eslint": "^7.32.0",
    "eslint-plugin-react": "^7.29.2"
  }
}

参考资料

Create React App (CRA)
Zip file containing the needed project files
React Uncaught ReferenceError: process is not defined
React Typescript：第 0 行：解析错误：无法读取属性 'name' 未定义

^{¹
在我的例子中 Google Chrome 版本 98.0.4758.102，64 位。
运行在 Windows 10.
²
通过运行ning npm install 安装项目（本地）——这可能
大约需要 5-9 分钟。

然后运行 npm start 在默认的网络浏览器中打开项目。}

Answer 1

What should I do to rectify these errors?

答案：将所有 `npm` 个软件包更新到最新版本

尝试将所有 npm 个软件包更新到最新版本。
目的是降低发生版本冲突的风险。

1。全局安装 `npm-check-updates`

在命令行中，运行： ¹

npm install --global npm-check-updates

2。检查最新版本

预览 npm-check-updates 将升级的软件包： ²

npm-check-updates

如果该列表看起来不错，请继续并将包更新到他们的您的 package.json 中的最新版本：

npm-check-updates --upgrade

这是 Windows 10 中的终端响应：

3。安装最新版本

在命令行中，运行： ³

npm install

4。在终端

中检查浏览器中的错误and/or

在命令行中，运行:

npm start

浏览器现在显示不少于五个错误。

终端确认五个错误

^{^点击放大}

哇。这看起来真的，真的很糟糕，不是吗？

没有。 别害怕！ – 您现在需要做的就是关闭服务器 (Ctrl+C) 和运行 npm start 再一次。
– 如果您仍然看到错误，请再做一次 – 关闭服务器并再次运行 npm start。
如果这也无济于事，请尝试等待大约 3-7 分钟，然后再再试一次npm start。

当我尝试这个时，浏览器中不再有任何错误。

并且终端报编译成功！

耶！

参考

npm-check-updates – documentation

^{¹
我在 Windows 10，但我希望此处提供的所有命令
在 Linux 和 macOS 上也能正常工作。
²
要获取选项列表，运行 npm-check-updates --help.
³
预计 npm install 命令大约需要 3-8 分钟
完成。

但如果您再次运行它，它应该会在 10-15 秒内完成。}

Uncaught ReferenceError: process is not defined / Line 0: Parsing error